<template>
  <div class="app-container">
    <el-row :gutter="10" style="margin-bottom:20px;">
      <el-col :span="5.5">
        <el-select
          v-model="searchValue.activity_id"
          placeholder="请选择活动主题"
          clearable
          filterable
          class="titlebus"
        >
          <el-option
            v-for="item in themeList"
            :label="item.title"
            :value="item.activity_id"
            :key="item.activity_id"
          ></el-option>
        </el-select>
      </el-col>
      <!-- <el-col :span="3">
        <el-select v-model="searchValue.status" placeholder="请选择状态" clearable filterable>
          <el-option
            v-for="(item,index) in stateList"
            :label="item.label"
            :value="item.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-col>-->
      <el-col :span="1.5">
        <el-button style=" background: #00BFD6; color: #FFFFFF; " @click="fetchData">
          搜索
          <i class="el-icon-search"></i>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button style=" background: #00BFD6; color: #FFFFFF; " @click="openAdd">
          新增
          <i class="el-icon-plus"></i>
        </el-button>
      </el-col>
      <!-- <el-col :span="1">
        <el-button style="margin-left:24px;" @click="reset">重置</el-button>
      </el-col>-->
    </el-row>
    <el-table
      :data="tableData"
      border
      v-loading="listLoading"
      element-loading-text="Loading"
      highlight-current-row
      style="width:100%;"
    >
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="title" label="活动名称"></el-table-column>
      <el-table-column prop="status" label="活动状态">
        <template slot-scope="scope">{{scope.row.status_text}}</template>
      </el-table-column>
      <el-table-column prop="date" label="活动时间">
        <template slot-scope="scope">{{scope.row.start_time}} - {{scope.row.end_time}}</template>
      </el-table-column>

      <el-table-column label="操作" width="110">
        <template slot-scope="scope">
          <router-link :to="'/activity/edit/'+scope.row.activity_id">
            <el-button
              style="background-color:#00BFD6; color:#fff; border-radius: 6px;"
              size="small"
            >规则设置</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:40px 0">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="searchValue.page"
        :limit.sync="searchValue.limit"
        @pagination="fetchData"
      />
    </div>
    <el-dialog
      :visible.sync="addShow"
      title="新增活动规则"
      class="role-box"
      :close-on-click-modal="false"
    >
      <el-form :model="activeForm" label-position="left">
        <el-form-item label="活动">
          <el-select
            v-model="activeForm.activity_id"
            placeholder="请选择活动主题"
            clearable
            filterable
            class="titlebus"
          >
            <el-option
              v-for="item in activityList"
              :label="item.title"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right; margin-top:40px">
        <el-button @click="addShow = false">取消</el-button>
        <el-button style="background-color:#00BFD6; color:#fff;" @click="confirmAdd">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getActivityList, getActivityAll, activityAdd } from "@/api/activity";
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    }
  },

  data() {
    return {
      activeForm: {
        activity_id: null
      },
      activityList: [],
      searchValue: {
        activity_id: null, //活动名称
        status: null, //活动状态
        page: 1,
        limit: 10
      },
      total: 0,
      listLoading: false,
      tableData: [],
      themeList: [], //活动名称列表
      stateList: [
        { value: 0, label: "未开始" },
        { value: 1, label: "进行中" },
        { value: 2, label: "已结束" }
      ], //状态列表
      addShow: false
    };
  },
  created() {
    this.fetchData();
    this.getActivity();
  },
  methods: {
    openAdd() {
      this.addShow = true;
      this.activeForm = {
        activity_id: null
      };
    },
    confirmAdd() {
      let params = Object.assign({}, this.activeForm);
      if (params.activity_id) {
        activityAdd(params)
          .then(result => {
            this.activeForm = { activity_id: null };
            this.addShow = false;
          })
          .catch(err => {});
      }
    },
    handleSizeChange(val) {
      this.searchValue.limit = val;
      this.fetchData();
    },
    reset() {
      this.searchValue.activity_id = null;
      this.searchValue.status = null;
      this.searchValue.page = 1;
      this.searchValue.limit = 10;
      this.total = null;
    },
    fetchData() {
      this.listLoading = true;
      let params = Object.assign({}, this.searchValue);
      const timeNow = new Date();
      getActivityList(params).then(res => {
        this.tableData = res.list;
        // 获取当前时间

        this.tableData.forEach(item => {
          const date1 = new Date(item.start_time1);
          const date1_end = new Date(item.end_time1);
          const date2 = new Date(item.start_time2);
           const date2_end = new Date(item.end_time2);
          const date3 = new Date(item.start_time3);
           const date3_end = new Date(item.end_time3);

          if (timeNow < date1) {
            item.status_text = "评审未开始";
          } else if (timeNow >= date1 && timeNow <= date1_end) {
            item.status_text = "一审中";
          } else if (timeNow >= date2 && timeNow <= date2_end) {
            item.status_text = "二审中";
          } else if (timeNow >= date3 && timeNow <= date3_end) {
            item.status_text = "三审中";
          } else if (timeNow >date3_end) {
            item.status_text = "评审已完成";
          }else{
          item.status_text = "评审中";
          }
        });
        this.themeList = res.list;
        this.total = res.total;
        this.listLoading = false;
      });
    },
    getActivity() {
      getActivityAll().then(res => {
        this.activityList = res.list;
      });
    }
  }
};
</script>
<style scoped>
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #00bfd6 !important;
}
.titlebus {
  width: 300px;
  max-width: 300px;
}
</style>